<template>
	<view class="charts">
		<f2 :init="initChart" :charts="chartCopyData" :ring="true" />
	</view>
</template>

<script>
	import f2 from '@/components/i-uni-f2/f2.vue'
	export default {
		name: 'ChartRing',
		props: {
			chartData: Array
		},
		components: {
			f2
		},
		data() {
			return {
				// num:15
			};
		},
		created() {},
		computed: {
			chartCopyData() {
				return this.chartData
			},
		},
		methods: {
			initChart(F2, config) {
				const {charts} = config
				const chart = new F2.Chart(config)
				chart.source(charts, {
				});
				chart.legend(false)
				chart.tooltip(false);
				chart.coord('polar', {
					transposed: true,
					radius:0.95,
					innerRadius: 0.5,
				});
				chart.axis(false);

				chart.guide().arc({
					start: [0, 0],
					end: [1, 99.9999],
					top: false,
					style: {
						lineWidth: 20,
						stroke: '#ccc'
					}
				});
				chart.guide().text({
					position: ['50%', '50%'],
					content: (charts[0] ? charts[0].y : 0) +'%',
					style: {
						fill: '#1890FF'
					}
				});
				chart
					.interval({
					    background: { style: { fill: 'green', fillOpacity: 1 } },
					  })
					.position(`x*y`)
					.size(20)
					.animate({
						appear: {
							duration: 1200,
							easing: 'cubicIn'
						}
					})
				chart.render();
				return chart
			}
		}
	}
</script>

<style scoped>
	.charts {
		width: 100%;
		height: 100%;
	}
</style>
